import PropTypes from "prop-types"
import React, { memo, useRef, useState } from "react"
import { Rating } from "@mui/material"
import { Carousel } from "antd"

import { RoomItemWrapper } from "./style"
import IconArrowLeft from "@/assets/svg/icon-arrow-left"
import IconArrowRight from "@/assets/svg/icon-arrow-right"
import Indicator from "@/base_ui/indicator"
import classNames from "classnames"

const RoomItem = memo((props) => {
  const { itemData, itemWidth = "25%", itemClick } = props
  const slideRef = useRef()
  const [selectIndex, setSelectIndex] = useState(0)

  function controlBtnHandle(isRight, e) {
    isRight ? slideRef.current.next() : slideRef.current.prev()
    // 获取最新索引
    let newIndex = isRight ? selectIndex + 1 : selectIndex - 1
    const length = itemData.picture_urls.length
    if (newIndex < 0) newIndex = length - 1
    if (newIndex > length - 1) newIndex = 0
    setSelectIndex(newIndex)

    // 不能点击左右切换就是因为事件冒泡
    e.stopPropagation()
  }

  // 在entrie-room 里面调用，由于 home 和 entire用的是同一个组件，所以要区分
  function itemClickHandle() {
    itemClick && itemClick(itemData)
  }

  const pictureEl = (
    <div className="cover">
      <img src={itemData?.picture_url} alt="请求失败" />
    </div>
  )

  const picturesEl = (
    <div className="swiper">
      <div className="control">
        <div className="btn left" onClick={(e) => controlBtnHandle(false, e)}>
          <IconArrowLeft width={30} height={30} />
        </div>
        <div className="btn right" onClick={(e) => controlBtnHandle(true, e)}>
          <IconArrowRight width={30} height={30} />
        </div>
      </div>
      <div className="indicator">
        <Indicator selectIndex={selectIndex}>
          {itemData?.picture_urls?.map((item, index) => {
            return (
              <div className="item-dot">
                <span
                  className={classNames("dot", [
                    { active: index === selectIndex },
                  ])}
                  key={item}
                ></span>
              </div>
            )
          })}
        </Indicator>
      </div>

      <Carousel dots={false} ref={slideRef}>
        {itemData?.picture_urls?.map((item) => {
          return (
            <div className="cover" key={item}>
              <img src={item} alt="请求失败" />
            </div>
          )
        })}
      </Carousel>
    </div>
  )
  return (
    <RoomItemWrapper itemWidth={itemWidth} onClick={itemClickHandle}>
      {/* inner 是里面的除了边距的内容 */}
      <div className="inner">
        {!!itemData.picture_urls ? picturesEl : pictureEl}
        <div className="desc">{itemData.verify_info.messages.join(" · ")}</div>
        <div className="name">{itemData.name}</div>
        <div className="price">￥{itemData.price}/晚</div>
        <div className="bottom">
          {/* precision 评分的精确度 */}
          <Rating
            readOnly
            // ?? 比 || 更严谨，?? 表示当前面的值为 undefined 或者 null 时才不显示，
            // 如果使用 || 的话，前面的值 为0 的话也会显示 五星，不严谨
            value={itemData.star_rating ?? 5}
            precision={0.1}
            sx={{ fontSize: "12px", color: "skyblue" }}
          />
          <span className="count">{itemData.reviews_count}</span>
          {itemData.bottom_info && (
            <span className="extra"> · {itemData.bottom_info?.content}</span>
          )}
        </div>
      </div>
    </RoomItemWrapper>
  )
})

RoomItem.propTypes = {
  itemData: PropTypes.object,
}

export default RoomItem
